<template>
  <el-form ref="form"
           :inline="true"
           :model="row"
           label-width="80px"
           :rules="rules">
    <el-form-item label="合同编号"
                  prop="code">
      <el-input v-model="row.code"
                maxlength="20"
                placeholder="请输入合同编号" />
    </el-form-item>
    <br>
    <el-form-item class="reset-item"
                  label="合同名称"
                  style="width: 100%;"
                  prop="name">
      <el-input v-model="row.name"
                maxlength="50"
                style="width: 100%;"
                placeholder="请输入合同名称" />
    </el-form-item>
    <br>
    <el-form-item label="所属部门"
                  prop="departmentId">
      <el-select v-model="row.departmentId"
                 placeholder="选择部门"
                 style="width: 200px;">
        <el-option v-for="item in departmentItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="合同类型"
                  prop="type">
      <el-select v-model="row.type"
                 placeholder="选择类型"
                 style="width: 200px;">
        <el-option v-for="item in typeItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item class="reset-item"
                  label="委托方"
                  style="width: 100%;"
                  prop="clientCompany">
      <el-select v-model="row.clientCompany"
                 filterable
                 allow-create
                 default-first-option
                 style="width: 100%;"
                 placeholder="请输入委托方">
        <el-option v-for="item in organData"
                   :key="item.id"
                   :label="item.name"
                   :value="item.name" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="联系方式"
                  prop="clientMan">
      <el-input v-model="row.clientMan"
                maxlength="10"
                placeholder="请输入委托方联系人" />
    </el-form-item>
    <el-form-item prop="clientPhone">
      <el-input v-model="row.clientPhone"
                maxlength="11"
                placeholder="请输入委托方联系电话" />
    </el-form-item>
    <br>
    <el-form-item class="reset-item"
                  label="咨询方"
                  style="width: 100%;"
                  prop="consultCompany">
      <el-select v-model="row.consultCompany"
                 filterable
                 allow-create
                 default-first-option
                 style="width: 100%;"
                 placeholder="请输入咨询方">
        <el-option v-for="item in organData"
                   :key="item.id"
                   :label="item.name"
                   :value="item.name" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="联系方式"
                  prop="consultMan">
      <el-input v-model="row.consultMan"
                maxlength="10"
                placeholder="请输入咨询方联系人" />
    </el-form-item>
    <el-form-item prop="consultPhone">
      <el-input v-model="row.consultPhone"
                maxlength="11"
                placeholder="请输入咨询方联系电话" />
    </el-form-item>
    <br>
    <el-form-item label="收到日期"
                  prop="receivedTime">
      <el-date-picker v-model="row.receivedTime"
                      type="date"
                      clearable
                      :editable="false"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期" />
    </el-form-item>
    <br>
    <el-form-item class="reset-item"
                  label="备注"
                  style="width: 100%;"
                  prop="remark">
      <el-input v-model="row.remark"
                type="textarea"
                :autosize="{ minRows: 4}"
                style="width: 100%;"
                placeholder="备注信息" />
    </el-form-item>
    <br>
    <el-row type="flex"
            justify="center"
            align="middle">
      <el-form-item>
        <el-button :loading="loading"
                   type="primary"
                   @click="handleFormSubmit">
          保存
        </el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    row: {
      default: Object,
      type: Object
    },
    loading: {
      default: false,
      type: Boolean
    },
    departmentItem: {
      default: () => [],
      type: Array
    },
    typeItem: {
      default: () => [],
      type: Array
    },
    organData: {
      default: () => [],
      type: Array
    }
  },
  data() {
    const clientCompanyCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入请输入委托方名称'))
      } else if (value.length > 20) {
        callback(new Error('输入委托方名称不能多于20个字符'))
      } else {
        callback()
      }
    }
    const consultCompanyCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入请输入咨询方名称'))
      } else if (value.length > 20) {
        callback(new Error('输入咨询方名称不能多于20个字符'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请输入所属部门', trigger: 'blur' }],
        type: [{ required: true, message: '请输入合同类型', trigger: 'blur' }],
        receivedTime: [{ required: true, message: '请输入收到时间', trigger: 'blur' }],
        clientCompany: [{ required: true, trigger: 'blur', validator: clientCompanyCheck }],
        consultCompany: [{ required: true, trigger: 'blur', validator: consultCompanyCheck }]
      }
    }
  },
  methods: {
    handleFormSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.row)
        }
      })
    },
    handleFormReset() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss">
.reset-item .el-form-item__content {
  width: calc(100% - 100px);
}
</style>
